<template>
    <div class="menu-page">
        <div class="table-top">
            <div>名称</div>
            <div>类别</div>
            <div>金额</div>
        </div>
        <div class="table-wrapper">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                <div class="table-row" v-for="item in list" :key="item.id">
                    <div>
                        <p>{{ item.title }}</p>
                        <p>{{ getTime(item.createtime) }}</p>
                    </div>
                    <div>{{ getType(item.type) }}</div>
                    <div>
                        <p>{{ getState(item.status) }}</p>
                        <p :class="{ red: item.status == 2 }">{{ item.status == 1 ? "+" : "-" }}￥ {{ item.amount }}</p>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    name: 'MenuPage',
    data() {
        return {
            page: 0,
            loading: true,
            finished: false,
            list: [],
            search: {
                id: '',
                time: '',
                type: '',
                state: ''
            }
        }
    },
    mounted() {
        this.onLoad()
    },
    methods: {
        onLoad() {
            this.page = 0
            this.list = []
            this.loading = true
            this.finished = false
            this.search = {
                id: this.$route.query.id,
                time: this.$route.query.time,
                type: this.$route.query.type,
                state: this.$route.query.state,
            }
            this.getList()
        },
        getTime(val) {
            return moment(val * 1000).format('YYYY-MM-DD HH:mm')
        },
        getType(val) {
            switch (val) {
                case 1:
                    return '入账';
                case 2:
                    return '出账';
                case 3:
                    return '转账';
                default:
                    return "";
            }
        },
        getState(val) {
            switch (val) {
                case 1:
                    return '收入';
                case 2:
                    return '支出';
                default:
                    return "";
            }
        },
        getList() {
            if (this.finished) {
                return
            }
            this.loading = true
            let start_time = '',
                end_time = ''
            if (this.search.type == 1) {
                start_time = Math.floor(new Date(this.search.time + ' 00:00:00').getTime() / 1000)
                end_time = Math.floor(new Date(this.search.time + ' 23:59:59').getTime() / 1000)
            } else {
                start_time = Math.floor(new Date(new Date(this.search.time).getFullYear(), new Date(this.search.time).getMonth(), 1, 0, 0, 0).getTime() / 1000);
                end_time = Math.floor(new Date(new Date(this.search.time).getFullYear(), new Date(this.search.time).getMonth() + 1, 1, 0, 0, 0).getTime() / 1000) - 1;
            }
            this.$api.account_log_lists({
                account_id: this.search.id,
                status: this.search.state,
                start_time,
                end_time,
                page: ++this.page,
            }).then(res => {
                this.loading = false
                this.list.push(...res.data.data)
                if (res.data.data < 10) {
                    this.finished = true
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
.menu-page {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background-color: #fff;

    .top-group {
        padding: 0 .4rem;
        background-color: #50b1c1;
        height: 50px;
        display: flex;
        // justify-content: space-around;
        align-items: center;
        font-size: 16px;
        color: #fff;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1;

        .top-select {
            display: flex;
            align-items: center;

            .van-icon {
                margin-left: 2px;
                font-size: 14px;
            }
        }
    }

    .table-top {
        padding: 0 .4rem;
        background-color: #f6f6f6;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #000;
        position: sticky;
        z-index: 1;
        top: 0px;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;

        div {
            word-break: break-all;

            &:nth-child(1) {
                width: 4.6rem;
            }

            &:nth-child(2) {
                width: 1.6rem;
                text-align: center;
            }

            &:nth-child(3) {
                flex: 1;
                text-align: right;
            }
        }
    }

    .table-wrapper {
        padding-bottom: 60px;

        .table-row {
            margin: 0 .4rem;
            min-height: 85px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #000;
            position: sticky;
            top: 50px;
            width: calc(100% - .8rem);
            border-bottom: 1px solid #e0e0e0;

            div {
                word-break: break-all;
                line-height: 1.4;

                &:nth-child(1) {
                    width: 4.6rem;

                    p {
                        font-size: 14px;
                        font-weight: bold;

                        &:last-of-type {
                            font-size: 12px;
                            font-weight: normal;
                            color: #999999;
                        }
                    }
                }

                &:nth-child(2) {
                    width: 1.6rem;
                    text-align: center;
                }

                &:nth-child(3) {
                    flex: 1;
                    text-align: right;

                    p {
                        &.red{
                            color: #f40000 !important;
                        }
                        &:last-of-type {
                            color: #50b1c1;
                        }
                    }
                }
            }
        }

        .table-row-tool {
            padding: 0 .4rem;
            min-height: 50px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border-top: 1px solid #e0e0e0;
            z-index: 1;
        }
    }
}</style>